<template>
	<view>
		<view class="head-info">
			<uv-navbar :placeholder="true" bg-color="transparent">
				<template v-slot:left>
					<view class="uv-nav-slot-left">
						中英文
					</view>
				</template>
				<template v-slot:center>
					<view class="uv-nav-slot-center">
						<uv-input
							:customStyle="customStyle"
							shape="circle"
							placeholder="请输入餐厅"
							prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: rgba(0, 197, 87, 1)"
						></uv-input>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot-right">
						
					</view>
				</template>
			</uv-navbar>
			<view class="address-box flex-box">
				<uv-icon size="28" name="empty-address"></uv-icon>
				定位信息
			</view>
		</view>
		<!-- 轮播 -->
		<view v-for="x in page.items" :key="x.unid">
			<!-- 导航栏显示 -->
			<m-view-base-icon v-if="x.type === 'BaseIcon'" :x="x" />
			<!-- 商品分类 -->
			<m-view-base-cate v-if="x.type === 'BaseCates'" :x="x" />
			<!-- 商品列表 -->
			<m-view-base-goods v-if="x.type === 'BaseGoods'" :x="x" />
			<!-- 图片魔方显示 -->
			<m-view-base-image v-if="x.type === 'BaseImage'" :x="x" />
			<!-- 轮播图显示 -->
			<m-view-base-slider v-if="x.type === 'BaseSlider'" :x="x" />
			<!-- 模块标题 -->
			<m-view-tool-title v-if="x.type === 'ToolTitle'" :x="x" />
			<!-- 辅助空白 -->
			<m-view-tool-blank v-if="x.type === 'ToolBlank'" :x="x" />
			<!-- 辅助线 -->
			<m-view-tool-border v-if="x.type === 'ToolBorder'" :x="x" />
		</view>
		<!-- 限时秒杀 -->
		<view class="new-product tn-mt-xl tn-pb-xs" >
			<view class="tn-flex justify-between tn-mb-xs">
				<view class="items-start tn-flex-baseline-start" style="background-image:url('/static/hr_ico.png');width:62%;height:54rpx;line-font:54rpx;background-size:cover;">
					<view style="color: aliceblue;">特价专区</view>
				</view>
				<view class="items-end">
					<image src="/static/more.png"></image>
				</view>
			</view>
			<view class="goods-list">
				<view class="list" @click="onSkip('goods')">
					<view class="pictrue">
						<image src="/static/image/banner_01.png"></image>
					</view>
					<view class="p-title">拌面</view>
					<view class="price" @click="onSkip('goods')">
						<text class="selling-price">￥59</text>
						<text class="original-price">￥19</text>
					</view>
				</view>
				<view class="list" @click="onSkip('goods')">
					<view class="pictrue">
						<image src="/static/image/banner_01.png"></image>
					</view>
					<view class="p-title">拌面</view>
					<view class="price">
						<text class="selling-price">￥399</text>
						<text class="original-price">￥299</text>
					</view>
				</view>
				<view class="list" @click="onSkip('goods')">
					<view class="pictrue">
						<image src="/static/image/banner_01.png"></image>
					</view>
					<view class="p-title">拌面</view>
					<view class="price">
						<text class="selling-price">￥3999</text>
						<text class="original-price">￥2999</text>
					</view>
				</view>
				<view class="list" @click="onSkip('goods')">
					<view class="pictrue">
						<image src="/static/image/banner_01.png"></image>
					</view>
					<view class="p-title">拌面</view>
					<view class="price">
						<text class="selling-price">￥599</text>
						<text class="original-price">￥199</text>
					</view>
				</view>
			</view>
		</view>
		<view class="g-body">
			<view class="goods-title">
				<uv-tabs 
				:list="list" 
				lineWidth="30" 
				lineColor="#f56c6c" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" 
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				></uv-tabs>
			</view>
      <view class="m-bg-main">
        <view class="tn-orangered-light_bg tn-m-xs tn-radius" v-for="item in storeList" :key="item.id" @click="goto.store(item.code)">
          <view class="tn-flex">
            <view class="tn-w-1-4 tn-m-xs">
              <uv-image width="100%" height="180rpx" :src="item.logo" :lazy-load="true"></uv-image>
            </view>
            <view class="tn-w-2-4 tn-m-xs">
              <view class="tn-text-2xl tn-text-uppercase">
                {{ item.name }}
              </view>
              <view class="tn-text-lg tn-mt-xs">
                月销量:1387 评论:67
              </view>
              <view class="tn-mt-xs">
                <uv-rate active-color="#FCC00E" size="20" count="5" :value="item.comment_score" readonly></uv-rate>
              </view>
            </view>
            <view class="tn-w-1-4 tn-flex-center-center">
              {{item.distance_text}}
            </view>
          </view>
          <view class="tn-flex">
            <view class="tn-m-xs" v-for="(ma,index) in item.marks_arr" :key="index">
              <uv-tags type="error"  :text="ma"></uv-tags>
            </view>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script lang="ts">
import { TaDataBase, TaCache, TaDataStore } from '@/utils'
import { defineComponent } from 'vue'

export default defineComponent({
	data() {
		return {
			customStyle:{
				'border':'1rpx solid rgba(0, 197, 87, 1) !important'
			},
			info:TaCache.get('addresInfo') || {},
			keys: '',
			page: {
				items: <any>[]
			},
				list: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
			storeList:[],
			navList: [
				{
					id: 1,
					name: '美食订餐',
				},{
					id: 2,
					name: '到店自取',
				},{
					id: 3,
					name: '超市便利',
				},{
					id: 4,
					name: '礼品',
				}
			],
			swiperList: [
				{
					id: 0,
					type: 'image',
					url: '/static/img/banner_01.png'
				},
				{
					id: 1,
					type: 'image',
					url: '/static/img/banner_02.png'
				},
				{
					id: 2,
					type: 'image',
					url: '/static/img/banner_03.png'
				},
			],
		}
	},
	onReady() {
		this.init().then(() => uni.stopPullDownRefresh())
	},
	onPullDownRefresh() {
		TaDataBase.layout().then(() => {
			setTimeout(() => uni.stopPullDownRefresh(), 500)
			this.init().then(() => uni.$emit('RefreshPageData'))
		})
	},
	onLoad(){
		console.log(this.info,'info')
	},
	methods: {
		// 初始化页面
		async init() {
			if(!this.info) this.getAddres();
			this.page = await TaDataBase.page('商城首页', true);
			this.getStoreList();
		},
		async getAddres() {
			let that = this;
			uni.getLocation({
			  type: 'wgs84', // 获取经纬度坐标类型，可选值为 wgs84、gcj02
			  success: function (res) {
				  let lng = res.longitude;
				  let lat = res.latitude;
				  TaDataBase.getAddressInfo(lng,lat).then((ret: any) => {
					  TaCache.set('addresInfo',ret.data);
					  that.info = ret.data;
					  that.getStoreList();
				  });
			  },
			  fail: function (err) {
				console.log(err,99999999999);
				console.log('获取位置信息失败：' + err.message);
			  }
			});  
		},
		async getStoreList() {
		  let that = this;
		  console.log(that.info,222)
		  console.log(that.info.location,333)
		  TaDataStore.withStore(that.info.location).then((ret: any) => {
			  that.storeList = ret.data.list;
			  console.log(ret,111)
		  });
		},
	}
})
</script>
<style lang="scss">
@import 'home.scss';
</style>